<template>
  <div>
    <el-dialog
      class="base-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.EquipUsageDetail"
      align="center"
      destroy-on-close
      :visible.sync="innerDialogFormVisible"
      @close="closeDialog"
    >
      <div>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.UsageDevice }}</span>
        </el-divider>
        <el-table
          :data="deviceList"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >
          <el-table-column :label="dataList.DeviceNumber">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSpecifications">
            <template slot-scope="scope">
              {{ scope.row.specifications }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en'
                ? dataList.eDeviceStorageAddress
                : dataList.DeviceStorageAddress
            "
          >
            <template slot-scope="scope">
              {{ scope.row.storageAddress }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DevicePersonResponsibleId">
            <template slot-scope="scope">
              {{ scope.row.personResponsibleName }}
            </template>
          </el-table-column>
        </el-table>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.UsageInfo }}</span>
        </el-divider>
        <el-descriptions class="margin-top" :column="2" :size="size" border>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.UsageName }}</template>
            {{ deviceUsageLog.userName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.UsageName }}</template>
            {{ deviceUsageLog.reasonsForUsing }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.BeginUsageTime }}</template>
            {{ formatTime(deviceUsageLog.startTime, "YYYY-MM-DD HH:mm") }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.EndUsageTime }}</template>
            {{ formatTime(deviceUsageLog.endTime, "YYYY-MM-DD HH:mm") }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.PreUseStatus }}</template>
            {{ deviceUsageLog.deviceFrontStateLabel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.PostUseStatus }}</template>
            {{ deviceUsageLog.deviceLaterStateLabel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.Rocorder }}</template>
            {{ deviceUsageLog.creatorName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ dataList.Deviceremark }}</template>
            {{ deviceUsageLog.remake }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">{{ btn.Return }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../api/DeviceUsageLog.js";
import { formatTime } from "../../utils/time";

export default {
  name: "DeviceUsageLogView",
  props: {
    id: {
      type: String,
      default: "",
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formatTime,
      size: "",
      deviceList: [],
      deviceUsageLog: {},
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.getData();
  },
  methods: {
    getData() {
      get({ id: this.id }).then((res) => {
        this.deviceUsageLog = res.data;
        if (res.data.deviceDto !== undefined && res.data.deviceDto !== null) {
          this.deviceList.push(res.data.deviceDto);
        }
      });
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
      this.$emit("close");
    },
    closeDialog() {
      console.log("99");

      this.cancel();
    },
  },
};
</script>
